<template>
     <el-dialog
      :close-on-click-modal="clickClose" 
      :title="title" 
      :visible.sync="visible">
      <slot></slot>
        <div slot="footer">
                <el-button @click="visible=false">取消</el-button>
                <el-button
                type="primary" 
                :loading="confirmLoaing"
                @click="$emit('confirm')"
                >确定</el-button>
        </div>
     </el-dialog>
</template>

<script>
    export default {
        name:"MyDialog",
        data() {
            return {
                /**
                 * 是否显示
                 */
                visible:false,
                /**
                 * 提及loading
                 */
                confirmLoaing:false,
            }
        },
        methods: {
            /**
             * 显示
             */
           show(){
              this.visible=true;
           },
           /**
            * 隐藏
            */
           hide(){
               this.visible=false;
           },
           /**
            * 开始loading
            */
           start(){
               this.confirmLoaing=true;
           },
          /**
           * 结束loading
           */
           stop(){
               this.confirmLoaing=false;
           }
        },
        props:{
            /**
             * 标题
             */
            title:String,
            /**
             * 点击遮罩层关闭
             */
            clickClose:Boolean,//布尔类型默认为false
        }
    }
</script>

<style scoped>

</style>